<template>
	<view :class="leng.length > 4 ? 'bank' : 'banks'">
	<!-- <view v-if="leng <1">
		123
	</view> -->
		<view style="height: 64px;width: 100%;background-color: #FFFFFF;display: flex;align-items: center;">
			<image src="../../static/img/icon_ren.png" mode="" style="margin-left: 25px;width: 22px;height: 24px;"></image>
			<text style="color: #042A58;font-size: 16px;margin-left: 17px;">{{cart.driverName}}</text>
			<text style="color: #627995;font-size: 16px;margin-left: 15px;">{{cart.driverPhone}}</text>
		</view>
		<view style="display: flex;align-items: center;flex-direction: column;" v-if="list.length==0" >
			<image src="../../static/img/pic_wukas.png" mode="" style="width: 181px;height: 121px;margin-top: 20px;"></image>
			<text style="color: #000000;font-size: 18px;font-weight: 500;margin-top: 44px;">暂无结算卡</text>
			<text style="color: #777777;font-size: 15px;margin-top: 12px;">您还未添加银行卡，请您添加银行卡！</text>
		</view>
		<view class="" v-if="list.length!=0" v-for="(v,i) in list" :key="i"  v-show="v.status==0">
		<view style="width: 355px;height: 80px;margin-top: 10px;position: relative;" v-show="bank==i" click="newbank(i)">
			<image src="../../static/img/bg_yhc.png" mode="" style="width: 100%;height: 100%;"></image>
				<image src="../../static/img/box_fx_xz.png" mode="" style="position: absolute;width: 24px;height: 24px;border-radius: 8px;top: 28px;left: 25px;"></image>
				<text style="color: #042A58;font-size: 18px;position: absolute;top: 13px;left: 70px;">{{v.bankName}}</text>
				<view style="color: #627995;font-size: 16px;position: absolute;top: 48px;left: 70px;">
					<text>{{v.usePeopleName}}</text>
					<text style="margin-left: 15px;">{{v.bankAccount}}</text>
				</view>
		</view>
		<view style="width: 355px;height: 80px;margin-top: 10px;position: relative;color: #9B9B9B;"  @click="newbank(i)" v-show="bank!=i" >
			<image src="../../static/img/bg_yhcs.png" mode="" style="width: 100%;height: 100%;"></image>
				<image src="../../static/img/box_fx_wx.png" mode="" style="position: absolute;width: 24px;height: 24px;border-radius: 8px;top: 28px;left: 25px;"></image>
				<text style="font-size: 18px;position: absolute;top: 13px;left: 70px;">{{v.bankName}}</text>
				<view style="font-size: 16px;position: absolute;top: 48px;left: 70px;">
					<text>{{v.usePeopleName}}</text>
					<text style="margin-left: 15px;">{{v.bankAccount}}</text>
				</view>
				
		</view>
		</view>
		<view class="loading" v-if="leng.length>4">{{ loadingTxt }}</view>
		<button @click="newbanks" class="button" v-if="leng.length==0" style="bottom: 20px;">新增银行卡</button>
		<button @click="newcartbanks" class="button" v-if="leng.length != 0">设为结算卡</button>
		<button @click="newbanked" class="buts" v-if="leng.length != 0">取消设置</button>
	</view>
</template>

<script>
	import {ajax} from "../../apis.js"
	var page=1; var timer=null ;var that=this
	export default {
		data() {
			return {
				checkboxChange:true,
				cart:"",
				list:[],
				leng:"",
				loadingTxt: '加载更多',
				index:"",
				indexs:"",
				add:[],
				bank:0,
				css:[]
			}
		},
		onLoad(option) {
			uni.showLoading({
				title: '加载中请稍等'
			});
			uni.hideHomeButton()
			this.cart=option
			var that=this
			this.index=option.index
			this.bank=Number(option.managerBankCardId)
			this.add=option
			this.getNews()
		},
		onPullDownRefresh() {
			this.getNews()
		},
		onReachBottom() {
			var that=this
			this.getMoreNews()
		},
		methods: {
			getMoreNews(){
				this.loadingTxt="加载中"
				var that=this
				uni.showNavigationBarLoading()
				ajax({
					url:"/v1/user/bankCard/list",
					method:"post",
					data:{offset:page,
					limit:1
					},
					success(res){
						if (that.list.length == res.data.total) {
							that.loadingTxt = '已经全部加载';
							uni.hideNavigationBarLoading();
							return false;
						}
						uni.hideNavigationBarLoading()
						that.list = that.list.concat(res.data.list);
						that.leng=that.list.length
						let index=that.list.findIndex((v,i)=>{
							return v.status==0
						})
						if(index==-1){
							that.leng=0
							that.list=[]
						}else{
						}
						uni.stopPullDownRefresh()
						 page++
					}
				})
			},
			getNews(){
				page=1;
				var that=this
				uni.showNavigationBarLoading()
				ajax({
					url:"/v1/user/bankCard/list",
					method:"post",
					data:{offset:page,
					limit:8
					},
					success(res){
						uni.hideLoading();
						var iner=res.data.list.map(item => item.id).indexOf(that.bank)
						that.bank=iner
						that.list=res.data.list
						// res.data.list.forEach(function(v,i){
						// 	if(v.status==0){
						// 		 that.leng=that.leng.concat(v.status)
						// 		 console.log(v)
						// 	}
						// })
						that.leng=[]
						for(var i in that.list){
								if(that.list[i].status==0){
									 that.leng=that.leng.concat(that.list[i].status)
								}
						}
						let index=that.list.findIndex((v,i)=>{
							return v.status==0
						})
						if(index==-1){
							that.leng=0
							that.list=[]
						}else{
							// that.leng=that.list.length
						}
						uni.stopPullDownRefresh()
						 uni.hideNavigationBarLoading()
						 page++
					}
				})
			},
			newbank(i){
				this.bank=i
				this.indexs=i
			},
			newcartbanks(){
				var that=this
				ajax({
					url:"/v1/manager/bind/driver/bankCard",
					method:"post",
					data:{
						managerBankCardId:that.list[that.indexs].id,
						id:that.cart.id
					},
					success(res){
						if(res.data.status=="OK"){
							uni.showToast({
							    title: '绑定银行卡成功',
								icon:"none"
							})
							setTimeout(function(){
							uni.navigateBack({
								delta:1
							})
							},1000)
						}
					}
				})
			},
			newbanks(){
				uni.navigateTo({
					url:"../Bank/newbank"
				})
			},
			newbanked(){
				var that=this
				ajax({
					url:"/v1/manager/bind/driver/bankCard",
					method:"post",
					data:{
						managerBankCardId:0,
						id:that.cart.id
					},
					success(res){
						if(res.data.status=="OK"){
							uni.showToast({
							    title: '取消银行卡成功',
								icon:"none"
							})
							setTimeout(function(){
							uni.navigateBack({
								delta:1
							})
							},1000)
						}
					}
				})
				// uni.navigateBack({
				// 				delta:1
				// 			}) 
			},
			chock(i){
				this.checkboxChange=!this.checkboxChange
			}
		}
	}
</script>

<style>
	.banks {
		width: 100%;
		height: 663px;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
.bank {
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.button {
	width: 355px;
	height: 44px;
	background: rgba(4, 42, 88, 1);
	border-radius: 8px;
	position: fixed;
	bottom: 40px;
	color: #ffffff;
}
.button {
	width: 355px;
	height: 44px;
	background: rgba(4, 42, 88, 1);
	border-radius: 8px;
	position: fixed;
	bottom: 80px;
	color: #ffffff;
	font-size: 16px;
}
.buts{
	width:355px;
	height:44px;
	background:rgba(218,224,231,1);
	border-radius:8px;
	color: #042A58;
	font-size: 16px;
	position: fixed;
	bottom: 20px;
}
.loading {
	text-align: center;
	color: #888;
	margin-bottom: 130px;
	margin-top: 20px;
}
</style>
